<style scoped>
.footer_row{background: #fff;justify-content: space-between;padding: 10px;}
.footer_row>.left>*{margin-right: 8px;}
.footer_row>.right>*{margin-left: 8px;}
.cart_menu{position: relative;}
.pay_money_details{position: absolute;z-index: 1;bottom: 100%;width: 100%;background-color: #fff;border-radius: 10px 10px 0 0;}
.pay_money_details>h3{justify-content: space-between;padding: 0 12px;padding-top: 10px;}
.cart_menu>.footer_row{position: relative;z-index: 2;}

.v-enter-active,
.v-leave-active {
  transition: transform .5s;
}
.v-enter-from,
.v-leave-to {
  transform: translateY(100%);
}
</style>
<template>
  <div class="cart_menu" @click.stop="">
    <transition>
      <div class="pay_money_details" v-show="show_extend">
        <h3 class="flex" ><span>账单明细</span> <van-icon name="cross" @click="show_extend=false"></van-icon></h3>
        <van-cell center title="商品总额" >
          <template #value><money :value="all_money"></money></template>
        </van-cell>
        <van-cell center title="加购项目" v-show="additional_money>0" >
          <template #value><money :value="additional_money"></money></template>
        </van-cell>
        <van-cell center title="活动减免" >
          <template #value><money :value="promotion_money*-1"></money></template>
        </van-cell>
        <van-cell center title="VIP减免" >
          <template #value><money :value="vip_money"></money></template>
        </van-cell>
      </div>
    </transition>
    <div class="footer_row flex">
      <div class="left flex">
        <van-checkbox v-show="showSelect" class="select" :model-value="select" @update:modelValue="$emit('update:select',$event)" >全选</van-checkbox>
        <div class="pay_money" @click.stop="show_extend = !show_extend">
          <p>总计：<b class="big"><money :value="pay_money"></money></b></p>

          <p class="sm" v-show="all_discount>0">已优惠：<money :value="all_discount"></money></p>
        </div>
      </div>
      <div class="right">
        <van-button type="primary" @click="$emit('buy')">立即购买</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import Money from "@/components/widget/Money.vue";

export default {
  name: 'footer-cart',
  components: {Money},
  props: {
    select: {
      type: Boolean,
      default: false,
    },
    showSelect: Boolean,
    all_money: {
      type: [Number, String],
      default: 0,
    },
    pay_money: {
      type: [Number, String],
      default: 0,
    },
    vip_money: {
      type: [Number, String],
      default: 0,
    },
    promotion_money: {
      type: [Number, String],
      default: 0,
    },
    additional_money: {
      type: [Number, String],
      default: 0,
    }

  },
  emits: ['buy','update:select'],
  data(){
    return {
      callback(ac){},

      show_extend: false,
    }
  },
  methods: {
  },
  watch: {
  },
  computed: {
    all_discount(){
      return (this.all_money + this.additional_money - this.pay_money).toFixed(2);
    }
  },
  mounted() {
  }
}
</script>